<template>
  <ul class="news-list">
    <li v-if="list">编号: {{ list.id }}</li>
    <li v-if="list">标题: {{ list.title }}</li>
    <li v-if="list">内容: {{ list.content }}</li>
    <li v-else>未找到数据</li>
  </ul>
  <ul class="news-list">
    <li v-if="id != null">编号: {{ id }}</li>
    <li v-if="title !=null">标题: {{ title }}</li>
    <li v-if="content != null">内容: {{ content }}</li>
  </ul>
</template>

<script setup lang="ts" name="About">
  import { useRoute } from 'vue-router'
  import { toRefs } from 'vue'
  import { computed } from 'vue'
  const route = useRoute()

  let paramsOrQuery
  if (Object.keys(route.params).length > 0) {
    paramsOrQuery = route.params
  } else {
    paramsOrQuery = route.query
  }
  const list = computed(() => {
    // 如果 query 有值，返回 query，否则返回 params
    return Object.keys(route.query).length > 0 ? route.query : route.params
  })

  // props 模式
  defineProps(['id', 'title', 'content'])
</script>

<style scoped>
  .news-list {
    list-style: none;
    padding-left: 20px;
  }

  .news-list > li {
    line-height: 30px;
  }
</style>
